<template>
  <div class="about">
    <h1>关于我们</h1>

    <van-tabs v-model:active="active" sticky scrollspy @change="onChange">
      <van-tab title="公司简介">
        <div class="content-section">
          <h2>公司简介</h2>
          <p>这是一个使用 Vue 3 + Vite 构建的项目</p>
          <p>我们是一家专注于移动端应用开发的科技公司，成立于2020年。</p>
          <p>
            公司致力于为客户提供高质量的移动应用解决方案，涵盖多个行业领域。
          </p>
          <div style="height: 300px" />
        </div>
      </van-tab>

      <van-tab title="产品服务">
        <div class="content-section">
          <h2>产品服务</h2>
          <p>我们提供以下产品和服务：</p>
          <van-cell-group inset>
            <van-cell title="移动应用开发" value="iOS/Android" />
            <van-cell title="Web应用开发" value="Vue/React" />
            <van-cell title="小程序开发" value="微信/支付宝" />
            <van-cell title="UI/UX设计" value="专业设计" />
          </van-cell-group>
          <div style="height: 300px" />
        </div>
      </van-tab>

      <van-tab title="团队介绍">
        <div class="content-section">
          <h2>团队介绍</h2>
          <p>我们的团队由经验丰富的开发人员、设计师和产品经理组成。</p>
          <van-grid :column-num="2">
            <van-grid-item icon="manager" text="产品经理" />
            <van-grid-item icon="photo" text="UI设计师" />
            <van-grid-item icon="setting" text="前端工程师" />
            <van-grid-item icon="apps" text="后端工程师" />
          </van-grid>
          <div style="height: 300px" />
        </div>
      </van-tab>

      <van-tab title="联系方式">
        <div class="content-section">
          <h2>联系方式</h2>
          <van-form>
            <van-cell-group inset>
              <van-field
                v-model="form.name"
                name="name"
                label="姓名"
                placeholder="请输入姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
              />
              <van-field
                v-model="form.phone"
                name="phone"
                label="手机号"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
              />
              <van-field
                v-model="form.message"
                name="message"
                label="留言"
                type="textarea"
                placeholder="请输入留言"
                rows="2"
                maxlength="50"
                show-word-limit
              />
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" @click="onSubmit">
                提交
              </van-button>
            </div>
          </van-form>
          <div style="height: 100px" />
        </div>
      </van-tab>

      <van-tab title="发展历程">
        <div class="content-section">
          <h2>发展历程</h2>
          <van-steps direction="vertical">
            <van-step>
              <h3>2023年</h3>
              <p>成功服务超过100家企业客户</p>
              <p>获得A轮融资2000万</p>
            </van-step>
            <van-step>
              <h3>2022年</h3>
              <p>团队规模扩大到50人</p>
              <p>成功开发20个大型项目</p>
            </van-step>
            <van-step>
              <h3>2021年</h3>
              <p>获得天使轮投资</p>
              <p>首个产品正式上线</p>
            </van-step>
            <van-step>
              <h3>2020年</h3>
              <p>公司正式成立</p>
              <p>核心团队组建完成</p>
            </van-step>
          </van-steps>
          <div style="height: 200px" />
        </div>
      </van-tab>

      <van-tab title="新闻动态">
        <div class="content-section">
          <h2>新闻动态</h2>
          <van-list>
            <van-cell-group inset>
              <van-cell
                v-for="(item, index) in news"
                :key="index"
                :title="item.title"
                :label="item.date"
                is-link
              />
            </van-cell-group>
          </van-list>
          <div style="height: 200px" />
        </div>
      </van-tab>

      <van-tab title="招聘信息">
        <div class="content-section">
          <h2>招聘信息</h2>
          <van-collapse v-model="activeCollapse">
            <van-collapse-item
              v-for="(job, index) in jobs"
              :key="index"
              :title="job.title"
              :name="index"
            >
              <p><strong>职位要求：</strong></p>
              <van-cell-group>
                <van-cell
                  v-for="(req, reqIndex) in job.requirements"
                  :key="reqIndex"
                  :title="req"
                />
              </van-cell-group>
              <van-button
                type="primary"
                size="small"
                style="margin-top: 10px"
                @click="applyJob(job)"
              >
                立即申请
              </van-button>
            </van-collapse-item>
          </van-collapse>
          <div style="height: 200px" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "vant";

const active = ref(0);
const form = ref({
  name: "",
  phone: "",
  message: "",
});

const onChange = (index) => {
  console.log("切换到标签:", index);
};

const onSubmit = () => {
  showToast("提交成功");
};

// 新增数据
const activeCollapse = ref([]);

const news = ref([
  { title: "公司完成新一轮融资", date: "2024-03-15" },
  { title: "新产品发布会圆满成功", date: "2024-03-01" },
  { title: "公司荣获年度最佳雇主", date: "2024-02-15" },
  { title: "成功举办技术开放日活动", date: "2024-02-01" },
]);

const jobs = ref([
  {
    title: "高级前端工程师",
    requirements: [
      "3年以上Vue.js开发经验",
      "熟悉移动端开发",
      "良好的团队协作能力",
    ],
  },
  {
    title: "产品经理",
    requirements: [
      "5年以上产品经理经验",
      "有成功上线产品案例",
      "优秀的沟通协调能力",
    ],
  },
  {
    title: "UI设计师",
    requirements: [
      "3年以上UI设计经验",
      "熟悉移动端设计规范",
      "有独立设计作品集",
    ],
  },
]);

const applyJob = (job) => {
  showToast(`已投递简历：${job.title}`);
};
</script>

<style scoped>
.about {
  text-align: center;
  padding-bottom: 50px;
}

.content-section {
  padding: 16px;
  text-align: left;
}

h1 {
  margin-bottom: 20px;
}

h2 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
}

p {
  margin-bottom: 16px;
  line-height: 1.6;
}

/* 新增样式 */
.van-step__title {
  margin-bottom: 8px;
}

h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #1989fa;
}

.van-collapse-item {
  margin-bottom: 8px;
}
</style>
